<template>
	<view class="general-worker">
		<view class="header">
			<view class="log-adderss">
				<image class="log" src="../../static/logo.png"></image>
				<view class="adderss">
					<image class="mark" src="../../static/首页ok_03.jpg"></image>
					全国
				</view>
			</view>
			<view class="back">返回招工首页</view>
		</view>
		<view @click="goMessage" class="details">
			<view class="search-header">
				<image class="background-image" src="../../static/背景.jpg"></image>
				<view class="search">
					<input type="text" placeholder="请输入您想查找的职位" />
					<image class="serach-log" src="../../static/搜索.png" mode=""></image>
				</view>
			</view>
			<view class="classify">
				<view class="classify-list">
					岗位<image class="classify-image" src="../../static/xia.jpg" mode=""></image>
				</view>
				<view class="classify-list">
					薪资<image class="classify-image" src="../../static/xia.jpg" mode=""></image>
				</view>
				<view class="supplement">
					排序<image class="classify-image " src="../../static/xia.jpg" mode=""></image>
				</view>
			</view>
			<view class="label">
				<view v-for="(item,index) in companys" :key="index">
					<view class="company">
						<view class="company-log">
							<image src="../../static/微信.png" mode=""></image>
						</view>
						<view class="data">
							<view class="content">
								待遇
								<view class="hot">热</view>
							</view>
							<view class="salary">
								4000元/月
							</view>
							<view>
								<view class="merit">
									国企 工资高 多劳多得
								</view>
							</view>
							<view class="company-address">
								<view class="address">公司名/地址</view>
								<view class="time">苏州市.01-17</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				companys: ["1"]
			}
		},
		components:{
			
		},
		methods:{
			goMessage(){
				uni.navigateTo({
					url:"/pages/generalworker/positionDetails"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.general-worker {
		margin-top: 60rpx;

		.header {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 40rpx;

			.log-adderss {
				display: flex;
				align-items: center;

				.log {
					width: 170rpx;
					height: 70rpx;
					margin-right: 20rpx;
				}

				.adderss {
					display: flex;
					align-items: center;

					.mark {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.back {
				border: solid 1px #007AFF;
				padding: 10rpx 20rpx;
				font-size: 38rpx;
				border-radius: 999rpx;
				color: #007AFF;
			}
		}

		.details {

			.search-header {
				background: #dbdcdf;
				padding-bottom: 70rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				.background-image {
					width: 100vw;
					height: 300rpx;
				}

				.search {
					position: absolute;
					bottom: 30rpx;

					input {
						background: #FFFFFF;
						color: #000000;
						padding: 12rpx 120rpx 12rpx 30rpx;
						border: solid 1px #969799;
						width: 60vw;
						border-radius: 10rpx;
						font-size: 34rpx;


					}

					.serach-log {
						position: absolute;
						right: 35rpx;
						bottom: 10rpx;
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

			.classify {
				display: flex;
				justify-content: space-around;
				padding: 10rpx 0;

				.classify-list {
					display: flex;
					font-size: 32rpx;
					color: #808080;
					border-right: solid 1px #C9C9C9;
					padding-right: 40rpx;

					.classify-image {
						width: 50rpx;
						height: 50rpx;
						margin-left: 10rpx;
					}
				}

				.supplement {
					display: flex;
					font-size: 32rpx;
					color: #808080;

					.classify-image {
						width: 50rpx;
						height: 50rpx;
						margin-left: 10rpx;
					}
				}
			}

			.label {
				padding: 0 20rpx 20rpx 20rpx;
				border-bottom: solid 1px #999999;
				margin-left: 20rpx;

				.company {
					display: flex;
					align-items: center;

					.company-log {
						image {
							margin-right: 30rpx;
							width: 120rpx;
							height: 120rpx;
						}
					}

					.data {
						display: flex;
						flex-direction: column;
						white-space: nowrap;
						.content {
							display: flex;
							font-size: 32rpx;
							margin-bottom: 10rpx;
							max-width: 500rpx;
							overflow: hidden;
							text-overflow: ellipsis;

							.hot {
								margin-left: 10rpx;
								text-align: center;
								width: 35rpx;
								height: 35rpx;
								background: #ff0000;
								color: #FFFFFF;
								border-radius: 5rpx;
								font-size: 26rpx;
							}
						}

						.salary {
							font-size: 32rpx;
							color: #EE0A24;
							margin-bottom: 10rpx;
						}

						.merit {
							display: inline;
							text-align: center;
							background: #DCDEE0;
							color: #007AFF;
							font-size: 32rpx;
							margin-bottom: 10rpx;
							padding: 0 10rpx;
							margin: 6rpx;
						}

						.company-address {
							display: flex;
							justify-content: space-around;
							margin-bottom: 10rpx;

							.address {
								width: 300rpx;
								font-size: 32rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.time {
								width: 200rpx;
								font-size: 32rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
				}
			}
		}
	}
</style>
